// 起运港、目的港标志位
var portFlag = "";
// 码头数据
var DOCK_LIST = [];
// 箱型信息
var BOX_INFO_LIST = [];
// 滑动插件
var mescroll;
// 查询列表
var asideTopSearch;

// 港口查询事件绑定
$(function () {
    // 点击港口 侧滑区域列表
    let asideLeftPort = $(".asideLeftPort").asideUi({
        size: "100%",
        position: "left",
        sidertime: 300
    });
    // 起始港
    $(".select_port_start").tap((event) => {
        portFlag = "10";
        $("input.port_input").val("");
        $(".asideLeftPort .formHeader").css("display", "block");
        loadDockData();
        asideLeftPort.toggle();
        event.preventDefault();
    });
    // 目的港
    $(".select_port_end").tap((event) => {
        portFlag = "20";
        $("input.port_input").val("");
        $(".asideLeftPort .formHeader").css("display", "block");
        loadDockData();
        asideLeftPort.toggle();
        event.preventDefault();
    });

    // 港口列表click
    $("#port_info").on("click", "li", (e) => {
        let dockId = $(e.target).closest("li").data("id");
        let text = $(e.target).closest("li").find("span").text();

        if (dockId && "" !== dockId && null != dockId) {
            let element = portFlag === "10" ? $("div.select_port_start") : $("div.select_port_end ");
            element.find("span.search_div_input_font").text(text);
            $(element).data("dock", dockId);
            // 收起弹出层
            $(".asideLeftPort .formHeader").css("display", "none");
            asideLeftPort.toggle();

        }
    });

    // 港口模糊查询
    $("input.port_input").on("input propertychange", (e) => {
        let input = $(e.target).val();
        if (!input || null == input || "" === input) {
            refrestDockData();
            return;
        }

        // 匹配的数据
        let data = [];
        $.each(DOCK_LIST, (index, value) => {
            let dock = value.value;
            let port = value.port;
            if (dock.indexOf(input) !== -1 || port.indexOf(input) !== -1) {
                data.push(value);
            }
        });

        let html = "";
        if (data.length === 0) {
            $("#port_info").html(html);
            return;
        }

        // 根据结果集 重新生成列表
        $.each(data, (index, value) => {
            html += "<li class='pt2 pb2 search_ul_li font_p' data-id='" + value.id + "'>";
            html += "    <span>" + value.port + "&nbsp;/&nbsp;" + value.value + "</span>";
            html += "</li>";
            html += "<div style='height: 1px;background: #dedede;-webkit-transform: scaleY(0.33);transform: scaleY(0.33);margin: 0 5px;'></div>";
        });
        $("#port_info").html(html);
    });

    // 返回按钮
    $(".asideLeftPort div.btn-refresh").on("click", "i", () => {
        asideLeftPort.toggle();
        $(".asideLeftPort .formHeader").css("display", "none");
    });
});
// 箱型绑定事件
$(function () {
    // 点击箱型 侧滑区域列表
    let asideLeftBox = $(".asideLeftBox").asideUi({
        size: "100%",
        position: "left",
        sidertime: 300
    });
    // 箱型
    $(".select_box").tap((event) => {
        $(".asideLeftBox .formHeader").css("display", "block");
        loadBoxData();
        asideLeftBox.toggle();
        event.preventDefault();
    });

    // 箱型列表click
    $("#box_info").on("click", "li", function () {
        let value = $(this).find("span").data("value");
        $("input.box_input").val("");
        if (value && "" !== value && null != value) {
            let element = $("div.select_box");
            element.find("span.search_div_input_font").text(value);
            // 收起弹出层
            $(".asideLeftBox .formHeader").css("display", "none");
            asideLeftBox.toggle();
        }
    });

    // 箱型模糊查询
    $("input.box_input").on("input propertychange", (e) => {
        let input = $(e.target).val();
        if (!input || null == input || "" === input) {
            loadBoxData();
            return;
        }

        // 匹配的数据
        let data = [];
        // 查询匹配
        $.each(BOX_INFO_LIST, (index, value) => {
            let boxType = value.text;
            if (boxType.indexOf(input) !== -1) {
                let object = value;
                data.push(object);
            }
        });

        let html = "";
        if (data.length === 0) {
            $("#box_info").html(html);
            return;
        }

        // 根据结果集 重新生成列表
        $.each(data, (index, value) => {
            html += "<li class='pt2 pb2 search_ul_li font_p'>";
            html += "    <span data-value='" + value.id + "'>" + value.text + "</span>";
            html += "</li>";
            html += "<div style='height: 1px;background: #dedede;-webkit-transform: scaleY(0.33);transform: scaleY(0.33);'></div>";
        });
        $("#box_info").html(html);
    });

    // 返回按钮
    $(".asideLeftBox div.btn-refresh").on("click", "i", () => {
        asideLeftBox.toggle();
        $(".asideLeftBox .formHeader").css("display", "none");
    });
});
// 运价上滑列表绑定事件
$(function () {
    // 点击查询 上滑区域列表
    asideTopSearch = $(".asideTopSearch").asideUi({
        size: "100%",
        position: "top",
        sidertime: 300
    });

    // 返回方法
    $("div.back-circle-btn").on("click", () => {
        asideTopSearch.toggle();
        $("div.back-circle-btn").hide();
        $("div.mescroll-upwarp.mescroll-hardware").remove();
        $("div.mescroll-downwarp").remove();
        event.preventDefault();
    });

    // 查询按钮
    $(".btn-search").tap((event) => {
        // 港口校验
        let startPort = $("div.select_port_start").find("span.search_div_input_font").text();
        let endPort = $("div.select_port_end").find("span.search_div_input_font").text();
        if (startPort === "请选择港口" || endPort === "请选择港口") {
            $("body").toastTip({
                message: "请选择港口信息",
                time: 1500
            });
            return;
        }

        $("#price_info").html("");
        event.preventDefault();

        // 加载滑动插件
        loadSearchList();
    });


    // 详情点击事件
    $("#price_info").on("click", "li", (e) => {
        let eleLi = $(e.target).closest("li");
        window.location.href = "/wechat/shipping/detail?boxType=" + $(eleLi).data("boxtype") + "&loadpierid=" + $(eleLi).data("loadpierid") + "&firstpierid=" + $(eleLi).data("firstpierid") +
            "&secondpierid=" + $(eleLi).data("secondpierid") + "&thirdpierid=" + $(eleLi).data("thirdpierid") + "&fourthpierid=" + $(eleLi).data("fourthpierid") + "&fifthpierid=" + $(eleLi).data("fifthpierid") +
            "&firstpiername=" + $(eleLi).data("firstpiername") + "&secondpiername=" + $(eleLi).data("secondpiername") + "&thirdpiername=" + $(eleLi).data("thirdpiername") +
            "&fourthpiername=" + $(eleLi).data("fourthpiername") + "&fifthpiername=" + $(eleLi).data("fifthpiername") +
            "&loadpiername=" + $(eleLi).data("loadpiername") + "&dispiername=" + $(eleLi).data("dispiername") +
            "&dispierid=" + $(eleLi).data("dispierid") + "&xf=" + $(eleLi).data("xf") + "&startPort=" + $(eleLi).data("startport") + "&endPort=" + $(eleLi).data("endport");
    });
});
// 公共事件
$(function () {
    // 如果从详情页面返回需带入查询条件
    let returnFlag = $(".j-ret-flag").text();
    if (returnFlag === "10") {
        $("div.select_port_start").find("span.search_div_input_font").html($.fn.cookie("startPort"));
        $("div.select_port_end").find("span.search_div_input_font").html($.fn.cookie("endPort"));
        let boxType = $.fn.cookie("boxType");
        if (boxType && boxType != null && boxType !== "") {
            $("div.select_box").find("span.search_div_input_font").text($.fn.cookie("boxType"));
        }
        $("div.select_port_start").data("dock", $.fn.cookie("loadpierid"));
        $("div.select_port_end").data("dock", $.fn.cookie("dispierid"));
        $("#price_info").html("");
        // 加载滑动插件
        loadSearchList();
    }

    // 清除按钮点击
    $("button.clean").on("click", () => {
        $("div.select_port_start").find("span.search_div_input_font").text("请选择港口");
        $("div.select_port_end").find("span.search_div_input_font").text("请选择港口");
        $("div.select_box").find("span.search_div_input_font").text("请选择箱型");
    });
});

let loadSearchList = () => {
    // 调用H5 滑动插件
    mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id (1.3.5版本支持传入dom对象)
        //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
        //解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
        down: {
            callback: downCallback, //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
            auto: false,
        },
        up: {
            callback: upCallback, //上拉加载的回调
            //以下是一些常用的配置,当然不写也可以的.
            page: {
                num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                size: 20 //每页数据条数,默认10
            },
            htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
            noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
            // 避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
            // 这就是为什么无更多数据有时候不显示的原因.
            // toTop: {
            //     //回到顶部按钮
            //     src: "../img/mescroll-totop.png", //图片路径,默认null,支持网络图
            //     offset: 1000 //列表滚动1000px才显示回到顶部按钮
            // },
            empty: {
                //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
                warpId: "xxid", //父布局的id (1.3.5版本支持传入dom元素)
                icon: "../img/mescroll-empty.png", //图标,默认null,支持网络图
                tip: "暂无相关数据~" //提示
            },
            // lazyLoad: {
            //     use: true, // 是否开启懒加载,默认false
            //     attr: 'imgurl' // 标签中网络图的属性名 : <img imgurl='网络图  src='占位图''/>
            // }
        }
    });
};

//上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
let upCallback = (page) => {
    let post = {};
    post.pageNum = page.num;
    post.pageSize = page.size;
    let loadpierid = $("div.select_port_start").data("dock");
    let dispierid = $("div.select_port_end").data("dock");
    let boxType = $("div.select_box").find("span.search_div_input_font").text();

    if (boxType === "请选择箱型") {
        boxType = "";
    }

    post.loadpierid = loadpierid;
    post.dispierid = dispierid;
    post.boxType = boxType;

    // cookie记录
    let startPort = $("div.select_port_start").find("span.search_div_input_font").text();
    let endPort = $("div.select_port_end").find("span.search_div_input_font").text();
    $.fn.cookie("startPort", startPort, {expires: 1});
    $.fn.cookie("endPort", endPort, {expires: 1});
    $.fn.cookie("boxType", boxType, {expires: 1});
    $.fn.cookie("loadpierid", loadpierid, {expires: 1});
    $.fn.cookie("dispierid", dispierid, {expires: 1});

    $.ajax({
        url: "/wechat/shipping/getShippingList.json",
        type: "post",
        datatype: "json",
        data: JSON.stringify(post),
        contentType: "application/json",
        success: (data) => {
            // 如果是第一页 并查询到数据  上滑列表页面
            if (page.num === 1 && data && data.length > 0) {
                asideTopSearch.toggle();
                $("div.back-circle-btn").show();
            } else if (page.num === 1 && (!data || data.length === 0)) {
                $("body").toastTip({
                    message: "没有查询到数据",
                    time: 1500
                });
                $("div.mescroll-upwarp.mescroll-hardware").remove();
                return;
            }

            if (data && data.length > 0 && data.length === 20) {
                mescroll.endSuccess(data.length, true);
            } else {
                mescroll.endSuccess(data.length, false);
            }

            let html = "";
            $.each(data, (index, value) => {
                html += "<li class='pt2 pb1 pl2 search_ul_li' data-boxType='" + value.boxType + "' " +
                    "data-loadpierid='" + value.loadpierid + "' data-firstpierid='" + value.firstpierid + "' data-secondpierid='" + value.secondpierid + "' " +
                    "data-thirdpierid='" + value.thirdpierid + "' data-fourthpierid='" + value.fourthpierid + "' data-fifthpierid='" + value.fifthpierid + "' " +
                    "data-firstpiername='" + value.firstpiername + "' data-secondpiername='" + value.secondpiername + "' data-thirdpiername='" + value.thirdpiername + "' " +
                    "data-fourthpiername='" + value.fourthpiername + "' data-fifthpiername='" + value.fifthpiername + "' " +
                    "data-loadpiername='" + value.loadpiername + "' data-dispiername='" + value.dispiername + "' " +
                    "data-dispierid='" + value.dispierid + "' data-xf='" + value.xf + "' data-startPort='" + value.startPort + "' data-endPort='" + value.endPort + "' >" +
                    "                    <div class='search_ul_li_div2'>" +
                    "                        <div class='f30 color9'>" + value.line + "</div>" +
                    "                        <div class='f24 color4 mt1 font_p'>" + value.lineDetails + "</div>" +
                    "                    </div>" +
                    "                    <div class='search_ul_li_div3'>" +
                    "                        <div class='div3_left f30'>" +
                    "                           <span>" + value.boxType + "</span>" +
                    "                           <span class='fw9'>￥" + value.xf + "</span>" +
                    "                        </div>" +
                    "                        <div class='f24 color4 mt1'>生效时间：" + value.effectTime.substr(0, value.effectTime.length - 3) + "</div>" +
                    "                    </div>" +
                    "                    <div class='f50 color4 search_ul_li_div4'>" +
                    "                        <i class='fa fa-angle-right ' style='color: #9c9c9c;font-size: 0.4rem;'></i>" +
                    "                    </div>" +
                    "     </li>";
                html += "<div style='height: 1px;margin: 0px 5px;background: #dedede;-webkit-transform: scaleY(0.33);transform: scaleY(0.33);'></div>";
            });

            $("#price_info").append(html);
        }
    });
};

//下拉刷新的回调
let downCallback = () => {
    let post = {};
    post.pageNum = 1;
    post.pageSize = 20;
    let loadpierid = $("div.select_port_start").data("dock");
    let dispierid = $("div.select_port_end").data("dock");
    let boxType = $("div.select_box").find("span.search_div_input_font").text();

    if (boxType === "请选择箱型") {
        boxType = "";
    }

    post.loadpierid = loadpierid;
    post.dispierid = dispierid;
    post.boxType = boxType;

    $.ajax({
        url: "/wechat/shipping/getShippingList.json",
        type: "post",
        datatype: "json",
        data: JSON.stringify(post),
        contentType: "application/json",
        success: (data) => {
            if (data && data.length > 0 && data.length === 20) {
                mescroll.endSuccess(data.length, true);
            } else {
                mescroll.endSuccess(data.length, false);
            }

            $("#price_info").html("");
            let html = "";
            $.each(data, (index, value) => {
                html += "<li class='pt2 pb1 pl2 search_ul_li' data-boxType='" + value.boxType + "' " +
                    "data-loadpierid='" + value.loadpierid + "' data-firstpierid='" + value.firstpierid + "' data-secondpierid='" + value.secondpierid + "' " +
                    "data-thirdpierid='" + value.thirdpierid + "' data-fourthpierid='" + value.fourthpierid + "' data-fifthpierid='" + value.fifthpierid + "' " +
                    "data-firstpiername='" + value.firstpiername + "' data-secondpiername='" + value.secondpiername + "' data-thirdpiername='" + value.thirdpiername + "' " +
                    "data-fourthpiername='" + value.fourthpiername + "' data-fifthpiername='" + value.fifthpiername + "' " +
                    "data-loadpiername='" + value.loadpiername + "' data-dispiername='" + value.dispiername + "' " +
                    "data-dispierid='" + value.dispierid + "' data-xf='" + value.xf + "' data-startPort='" + value.startPort + "' data-endPort='" + value.endPort + "' >" +
                    "                    <div class='search_ul_li_div2'>" +
                    "                        <div class='f30 color9'>" + value.line + "</div>" +
                    "                        <div class='f24 color4 mt1 font_p'>" + value.lineDetails + "</div>" +
                    "                    </div>" +
                    "                    <div class='search_ul_li_div3'>" +
                    "                        <div class='div3_left f30'>" +
                    "                           <span>" + value.boxType + "</span>" +
                    "                           <span class='fw9'>￥" + value.xf + "</span>" +
                    "                        </div>" +
                    "                        <div class='f24 color4 mt1'>生效时间：" + value.effectTime.substr(0, value.effectTime.length - 3) + "</div>" +
                    "                    </div>" +
                    "                    <div class='f50 color4 search_ul_li_div4'>" +
                    "                        <i class='fa fa-angle-right ' style='color: #9c9c9c;font-size: 0.4rem;'></i>" +
                    "                    </div>" +
                    "     </li>";
                html += "<div style='height: 1px;margin: 0px 5px;background: #dedede;-webkit-transform: scaleY(0.33);transform: scaleY(0.33);'></div>";
            });

            $("#price_info").append(html);
        }
    });
};

// 2020-02-26 需求变更  改为一级查询  查询码头数据
let loadDockData = () => {
    $.ajax({
        url: "/wechat/shipping/getDockList.json",
        type: "post",
        datatype: "json",
        contentType: "application/json",
        success: function (data) {
            if (data && data.length > 0) {
                // 处理数据  获取片区和港口
                let html = "";
                DOCK_LIST = data;
                $.each(DOCK_LIST, (index, value) => {
                    html += "<li class='pt2 pb2 search_ul_li font_p' data-id='" + value.id + "'>";
                    html += "    <span>" + value.port + "&nbsp;/&nbsp;" + value.value + "</span>";
                    html += "</li>";
                    html += "<div style='height: 1px;background: #dedede;-webkit-transform: scaleY(0.33);transform: scaleY(0.33);margin: 0 5px;'></div>";
                });
                $("#port_info").html(html);
            }
        }
    });
};
let refrestDockData = () => {
    let html = "";
    $.each(DOCK_LIST, (index, value) => {
        html += "<li class='pt2 pb2 search_ul_li font_p' data-id='" + value.id + "'>";
        html += "    <span>" + value.port + "&nbsp;/&nbsp;" + value.value + "</span>";
        html += "</li>";
        html += "<div style='height: 1px;background: #dedede;-webkit-transform: scaleY(0.33);transform: scaleY(0.33);margin: 0 5px;'></div>";
    });
    $("#port_info").html(html);
};

// 加载箱型数据
let loadBoxData = () => {
    $.ajax({
        url: "/wechat/shipping/getBoxTypeData.json",
        type: "post",
        datatype: "json",
        contentType: "application/json",
        success: function (data) {
            if (data && data.length > 0) {
                let html = "";
                BOX_INFO_LIST = data;
                $.each(BOX_INFO_LIST, (index, value) => {
                    html += "<li class='pt2 pb2 search_ul_li font_p'>";
                    html += "    <span data-value='" + value.id + "'>" + value.text + "</span>";
                    html += "</li>";
                    html += "<div style='height: 1px;background: #dedede;-webkit-transform: scaleY(0.33);transform: scaleY(0.33);'></div>";
                });
                $("#box_info").html(html);
            }
        }
    });
};